<template>
  <el-main>
    <!-- 查询条件 -->
    <el-form
      ref="searchForm"
      :model="searchModel"
      label-width="80px"
      :inline="true"
      size="mini"
    >
      <el-form-item>
        <el-input v-model="searchModel.departmentName" placeholder="请输入部门名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search()" size="mini">查询
        </el-button>
        <el-button icon="el-icon-refresh-right" @click="resetValue()" size="mini">重置</el-button>
          <!-- <el-button type="success" icon="el-icon-plus" @click="openAddWindow()">新增</el-button> -->
        </el-form-item>
        <div style="margin: 0px 0px 5px 0px">
          <el-button
            style="font-size: 10px"
            icon="el-icon-plus"
            size="mini"
            type="success"
            @click="openAddWindow()"
          >新增</el-button>
        </div>
    </el-form>
    <!-- 数据表格 -->
    <el-table
      class="tableBox"
      style="width: 100%; margin-bottom: 10px; font-size: 15px"
      :data="tableData"
      border
      stripe
      row-key="id"
      default-expand-all
      :tree-props="{ children: 'children' }"
    >
      <el-table-column prop="departmentName" label="部门名称" />
      <el-table-column prop="parentName" label="所属部门" />
      <el-table-column prop="phone" label="部门电话" />
      <el-table-column prop="address" label="部门位置" />
      <el-table-column label="操作" width="250px" align="center">
        <template slot-scope="scope">
          <el-button
            style="font-size: 10px"
            icon="el-icon-edit-outline"
            type="primary"
            size="mini"
            @click="handleEdit(scope.row)"
          >编辑
          </el-button>
          <el-button
            style="font-size: 10px"
            icon="el-icon-close"
            type="danger"
            size="mini"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  <!-- 添加和编辑部门窗口 -->
  <system-dialog
    :title="deptDialog.title"
    :visible="deptDialog.visible"
    :width="deptDialog.width"
    :height="deptDialog.height"
    @onClose="onClose"
    @onConfirm="onConfirm"
  >
    <div slot="content">
      <el-form
        ref="deptForm"
        :model="dept"
        :rules="rules"
        label-width="120px"
        :inline="true"
        size="small"
      >
        <el-form-item label="所属部门" prop="parentName">
          <el-input
            v-model="dept.parentName"
            :readonly="true"
            @click.native="selectDepartment()"
          />
        </el-form-item>
        <el-form-item label="部门名称" prop="departmentName">
          <el-input v-model="dept.departmentName" />
        </el-form-item>
        <el-form-item label="部门电话">
          <el-input v-model="dept.phone" />
        </el-form-item>
        <el-form-item label="部门地址">
          <el-input v-model="dept.address" />
        </el-form-item>
        <el-form-item label="序号">
          <el-input v-model="dept.orderNum" />
        </el-form-item>
      </el-form>
    </div>
  </system-dialog>
    <!-- 选择所属部门窗口 -->
  <system-dialog
    :title="parentDialog.title"
    :visible="parentDialog.visible"
    :width="parentDialog.width"
    :height="parentDialog.height"
    @onClose="parentOnClose"
    @onConfirm="parentOnConfirm"
  >
    <div slot="content">
      <el-tree
        ref="parentTree"
        :data="treeList"
        node-key="id"
        :props="defaultProps"
        :default-expand-all="true"
        :highlight-current="true"
        :expand-on-click-node="false"
        @node-click="handleNodeClick"
      >
        <div slot-scope="{ node, data }" class="customer-tree-node">
          <span v-if="data.children.length === 0">
            <i class="el-icon-document" />
          </span>
          <span v-else @click="openBtn(data)">
            <svg-icon v-if="data.open" icon-class="add-s" />
            <svg-icon v-else icon-class="sub-s" />
          </span>
          <span style="margin-left: 5px">{{ node.label }}</span>
        </div>
      </el-tree>
    </div>
  </system-dialog>
  </el-main>
</template>
<script>
//导入api脚本
import departmentApi from "@/api/department";
//导入对话框组件
import SystemDialog from '@/components/system/SystemDialog.vue';


export default {
  name: 'Department',
  //注册组件
  components:{
    SystemDialog
  },
  data() {
    return {
      searchModel: {
        departmentName: "", //部门名称
      },
      tableData: [],// 表格数据列表
      // 部门窗口属性
      deptDialog: {
        title: '新增部门',
        visible: false, // 是否显示
        width: 810,
        height: 300
      },
      // 部门对象
      dept: {
        id: '',
        pid: '',
        parentName: '',
        departmentName: '',
        address: '',
        phone: '',
        orderNum: ''
      },
      // 表单验证规则
      rules: {
        parentName: [{ required: true, trigger: 'change', message: '请选择所属部门' }],
        departmentName: [{ required: true, trigger: 'blur', message: '请输入部门名称' }]
      },
      // 选择所属部门属性
      parentDialog: {
        title: '选择所属部门',
        visible: false, // 是否显示
        width: 300,
        height: 400
      },
      // 树形菜单列表
      treeList: [],
      defaultProps: {
        children: 'children',
        label: 'departmentName'
      }
    }
  },
  created() {
    //调用查询部门列表方法
    this.search();
  },
  methods: {
    /**
    * 编辑部门
    * @param row
    */
    handleEdit(row) {
      // 数据回显
      this.$objCopy(row, this.dept)
      // 设置窗口标题
      this.deptDialog.title = '编辑部门'
      // 显示编辑部门窗口
      this.deptDialog.visible = true
    },
    /**
    * 删除部门
    * @param row
    */
    async handleDelete(row) {
      // 查询部门下是否存在子部门或用户
      const result = await departmentApi.checkDepartment({ id: row.id })
      console.log("判断部门是否用使用状态  ",result)
      // 判断是否可以删除
      if (!result.success) {
        // 提示不能删除
        this.$message.warning(result.message)
      } else {
        // 确认是否删除
        const confirm = await this.$myconfirm('确定要删除该数据吗?')
        if (confirm) {
          // 发送删除请求
          const res = await departmentApi.deleteById({ id: row.id })
          // 判断是否成功
          if (res.success) {
            // 成功提示
            this.$message.success(res.message)
            // 刷新
            this.search()
          } else {
            // 失败提示
            this.$message.error(res.message)
          }
        }
      }
    },
    /**
    * 查询部门列表
    */
    async search() {
      //发送查询请求
      let res = await departmentApi.getDepartmentList(this.searchModel);
      //判断是否存在数据
      if (res.success) {
        //获取数据
        this.tableData = res.data;
      }
    },
    /**
    * 弹窗取消事件
    */
    onClose() {
      // 关闭窗口
      this.deptDialog.visible = false
    },
    /**
    * 弹窗确认事件
    */
    onConfirm() {
      this.$refs.deptForm.validate(async(valid) => {
        if (valid) {
          let res = null// 后端返回的数据
          // 判断部门ID是否有数据，如果部门ID为空，则表示新增，否则就是修改
          if (this.dept.id === '') { // 新增
            // 发送新增请求
            res = await departmentApi.addDept(this.dept)
          } else {
            // 发送修改请求
            res = await departmentApi.updateDept(this.dept)
          }
          // 判断是否成功
          if (res.success) {
            this.$message.success(res.message)
            // 刷新
            this.search()
            // 关闭窗口
            this.deptDialog.visible = false
          } else {
            this.$message.error(res.message)
          }
        }
      })
    },
    /**
    * 打开添加部门窗口
    */
    openAddWindow() {
      //清空表单数据
      this.$resetForm("deptForm", this.dept); 
      // 设置窗口标题
      this.deptDialog.title = '新增部门'
      // 显示添加部门窗口
      this.deptDialog.visible = true
    },
  /**
    * 选择所属部门
    */
    async selectDepartment() {
      // 显示窗口
      this.parentDialog.visible = true
      // 设置窗口标题
      this.parentDialog.title = '选择所属部门'
      // 查询部门列表
      const res = await departmentApi.getParentTreeList()
      // 判断是否成功
      if (res.success) {
        // 赋值
        this.treeList = res.data
      }
    },
    /**
    * 选择所属部门取消事件
    */
    parentOnClose() {
      this.parentDialog.visible = false
    },
    /**
    * 选择所属部门确认事件
    */
    parentOnConfirm() {
      this.parentDialog.visible = false
    },
    /**
    * 树节点点击事件
    */
    handleNodeClick(data) {
      // 当点击树节点时，赋予选中的值
      this.dept.pid = data.id
      this.dept.parentName = data.departmentName
    },
    /**
    * 点击树节点+-号折叠展开事件
    */
    openBtn(data) {
      // 修改折叠展开状态
      data.open = !data.open
      this.$refs.parentTree.store.nodesMap[data.id].expanded = !data.open
    },
        /**
    * 重置查询条件
    */
    resetValue() {
      // 清空查询条件
      this.searchModel.departmentName = ''
      // 重新查询
        this.search();
    },
  }
}
</script>

<style lang="scss">
::v-deep .el-tree {
.el-tree-node {
  position: relative;
  padding-left: 10px;
}
.el-tree-node__children {
  padding-left: 20px;
}
.el-tree-node :last-child:before {
  height: 40px;
}
.el-tree > .el-tree-node:before {
  border-left: none;
}
.el-tree > .el-tree-node:after {
  border-top: none;
}
.el-tree-node:before,
.el-tree-node:after {
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}
.tree :first-child .el-tree-node:before {
  border-left: none;
}
.el-tree-node:before {
  border-left: 1px dotted #d9d9d9;
  bottom: 0px;
  height: 100%;
  top: -25px;
  width: 1px;
}
.el-tree-node:after {
  border-top: 1px dotted #d9d9d9;
  height: 20px;
  top: 14px;
  width: 24px;
}
.el-tree-node__expand-icon.is-leaf {
  width: 8px;
}
.el-tree-node__content > .el-tree-node__expand-icon {
  display: none;
}
.el-tree-node__content {
  line-height: 30px;
  height: 30px;
  padding-left: 10px !important;
}
}
::v-deep .el-tree > div {
&::before {
  display: none;
}
&::after {
  display: none;
}
}

// el-table 表格行高设置
.tableBox {
  th {
    padding: 0 !important;
    height: 40px;
    line-height: 40px;
  }
  td {
    padding: 0 !important;
    height: 40px;
    line-height: 40px;
  }
}

</style>